<template>
  <div
    class="hint-line-wrapper"
    v-if="failTimes"
  >
    <div
      class="flex-h flex-vc hint-line"
      @click="goToPay"
    >
      <!-- <img
      src=""
      alt=""
    > -->
      <i class="iconfont icon-errorcorrection"></i>
      <p class="flex1">支付失败订单</p>
      <span class="baseColorNoAcitve">去支付</span>
      <i class="iconfont icon-rightangel baseColorNoAcitve"></i>
    </div>
  </div>
</template>

<script>
import { open } from '@/utils/JumpUtils'
import { getPosBillUnpayCount } from '../api/api.js'
export default {
  data() {
    return {
      // 失败的次数
      failTimes: 0
    }
  },
  mounted() {
    // this.getFailTimes()
    // 添加返回事件回调刷新失败行程数
    document.addEventListener(
      'resume',
      () => {
        this.getFailTimes()
      },
      false
    )
  },
  methods: {
    getFailTimes() {
      getPosBillUnpayCount().then(body => {
        console.log(body.UNPAY_SUCCESS_COUNT)
        this.failTimes = body.UNPAY_SUCCESS_COUNT
      }).catch(() => {

      })
      // // TODO:
      // setTimeout(() => {
      //   this.failTimes = 3
      // }, 200)
    },
    // 跳转到失败行程列表
    goToPay() {
      open('payorderlist.html?_tv=false&from=consumelist')
    }
  }
}
</script>

<style>
.hint-line-wrapper {
  width: 100%;
  height: 120px;
  padding: 16px 0 9px 0;
  overflow: hidden;
}
.hint-line {
  width: 630px;
  height: 120px;
  background-color: #ffffff;
  padding: 0 30px;
  color: #333333;
  border-radius: 8px;
  margin: 0 auto;
  -webkit-box-shadow: 0px 10px 15px #eeeeee;
  box-shadow: 0px 10px 15px #eeeeee;
  font-size: 32px; /*px*/
}
.hint-line > .icon-errorcorrection {
  width: 55px;
  height: 55px;
  margin-right: 25px;
  font-size: 56px;
  color: #ff6e4a;
}
.hint-line > .icon-rightangel {
  font-size: 30px;
  font-weight: bold;
  padding-left: 8px;
}
</style>
